<template>
  <view class="index">
    <view class="list">
      <view v-for="(item,index) in list" :key="index" @click="toList(item)">
        <view class="list-box f ai-c jc-s-b">
          <view class="poster-box">
            <view class="pieces">共{{item.info_num}}篇</view>
            <image :src="item.image" class="poster"></image>
          </view>
          <view class="info f fd-c f1">
            <view class="title">
              {{item.title}}
            </view>
            <view class="f ai-c jc-s-b browse">
              <view>{{item.read_num}}人浏览</view>
              <view class="f ai-c">
                <image :src="item.is_collection?'../../static/collect-active.png':'../../static/collect.png'" class="collect" @click.stop="handleCollect(item)"></image>
                <image src="../../static/more.png" class="more" @click.stop="handleMore(index)"></image>
              </view>
            </view>
          </view>
        </view>
        <view class="f jc-s-b more-box" v-show="item.checked">
          <view class="f fd-c ai-c" @click.stop="handleCollect(item)">
            <image src="../../static/list-collect.png"></image>
            收藏
          </view>
          <view class="f fd-c ai-c">
            <image src="../../static/download.png"></image>
            下载
          </view>
          <view class="f fd-c ai-c">
            <button open-type="share" :data-obj="item" catchtap="share" style="">
              <image src="../../static/share.png"></image>
              <text>分享</text>
            </button>
          </view>
          <view class="f fd-c ai-c" @click.stop="handleShare(item)">
            <image src="../../static/pyq.png"></image>
            朋友圈
          </view>

        </view>
      </view>

    </view>

  </view>
</template>

<script>
import {
  databaseInfoSetList, collectionDatabase
} from '@/api/index.js'
export default {

  data () {
    return {
      curt: 0,
      list: [],
      id: null
    }
  },
  onLoad (options) {

    this.id = options.id
    this.getList()
  },
  onReady () {



  },
  onShareAppMessage (res) {
    const data = res.target.dataset.obj
    if (res.from === 'button') {
      // 来自页面内转发按钮
      return {
        title: data.title,
        path: `/pages/share/share?type=1&id=${data.id}&shareType=friend&database_type=2`,
        imageUrl: data.image
      };
    }
  },
  methods: {
    toList (data) {
      console.log(data, '测试数据')
      // this.$store.dispatch('getCollectFileData', data)
      uni.navigateTo({
        url: `/pages/information/list?id=${data.id}`
      })
    },
    //分享到朋友圈
    handleShare (data) {
      uni.navigateTo({
        url: `/pages/share/share?type=1&id=${data.id}&shareType=pyq&database_type=2`
      })
    },
    async handleCollect (data) {
      data.is_collection = !data.is_collection
      await collectionDatabase({
        database_id: data.id,
        title: data.title
      })
    },
    async getList () {
      const { data } = await databaseInfoSetList({ database_id: this.id })
      data.checked = false
      this.list = data
    },

    //点击更多
    handleMore (index) {
      this.list.forEach((item, itemIndex) => {
        if (index == itemIndex) {
          item.checked = !item.checked
        } else {
          item.checked = false
        }

      })
    },
    changeClassify (index) {
      this.curt = index
    },
    showType () {
      this.$refs.typeModel.setPopup();
    }
  }
}
</script>

<style scoped lang="scss">
button {
  background-color: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size: 22rpx;
  color: #464e59;

  text {
    position: relative;
    margin-top: -14rpx;
  }
}

button::after {
  border: none;
}
.index {
  background: #f7f8fc;
  min-height: 100vh;

  .list {
    width: 710rpx;
    margin: auto;

    .more-box {
      font-size: 22rpx;
      color: #464e59;
      margin-top: 24rpx;
      margin-bottom: 10rpx;
      padding: 0 24rpx;
      box-sizing: border-box;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 8rpx;
      }
    }

    .list-box {
      background: #fff;
      border-radius: 24rpx;
      padding: 24rpx;
      box-sizing: border-box;
      margin-bottom: 16rpx;

      .info {
        .browse {
          color: #999999;
          font-size: 24rpx;
          margin-top: 40rpx;

          .collect {
            width: 30rpx;
            height: 30rpx;
            margin-right: 16rpx;
          }

          .more {
            width: 30rpx;
            height: 30rpx;
          }
        }

        .title {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 28rpx;
          font-weight: 700;
        }

        .recommend {
          background: linear-gradient(to right, #36c684, #03c9ba);
          width: 80rpx;
          height: 35rpx;
          color: #fff;
          font-size: 24rpx;
          border-radius: 8rpx;
          display: inline-block;
          text-align: center;
          margin-right: 8rpx;
          line-height: 35rpx;
          font-weight: 800;
        }
      }

      .poster-box {
        position: relative;

        .pieces {
          position: absolute;
          left: 0;
          top: 0;
          color: #91aeff;
          font-size: 20rpx;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 0 0rpx 20rpx 0;
          width: 90rpx;
          height: 35rpx;
          text-align: center;
          line-height: 35rpx;
        }
      }

      .poster {
        width: 170rpx;
        height: 210rpx;
        margin-right: 16rpx;
        border-radius: 0 24rpx 24rpx 0;
      }
    }
  }
}
</style>